<template>
  <div class="over-not-line">
    <amap style="height: 100%" :showCarLine="showCarLine" />
    <transForm>
      <div class="mapwhit">
        <!--        <topCenter />-->
        <top style="pointer-events: auto;" />
        <left style="pointer-events: auto;" />
        <bottom :showCarLine.sync="showCarLine" style="pointer-events: auto;" />
        <right style="pointer-events: auto;" />
      </div>
    </transForm>
  </div>
</template>

<script>
import amap from "@/views/bigScreen/globalView/components/amap.vue"
import top from "@/views/bigScreen/globalView/components/top.vue"
import left from "@/views/bigScreen/globalView/components/left.vue"
import bottom from "@/views/bigScreen/globalView/components/bottom.vue"
import right from "@/views/bigScreen/globalView/components/right.vue"
import { socket } from "@/utils/ws"
import transForm from "@/views/bigScreen/transForm.vue"
window.WIDGET = {
  CONFIG: {
    modules: "012",
    background: "5",
    tmpColor: "FFFFFF",
    tmpSize: "16",
    cityColor: "FFFFFF",
    citySize: "16",
    aqiColor: "FFFFFF",
    aqiSize: "16",
    weatherIconSize: "24",
    alertIconSize: "18",
    padding: "0px 0px 0px 0px",
    shadow: "0",
    language: "auto",
    borderRadius: "0",
    fixed: "false",
    vertical: "top",
    horizontal: "left",
    key: "f4201d1e1bcb4cc292ef61f6e1ede469"
  }
}
export default {
  components: { amap, top, left, bottom, right, transForm },
  data() {
    return {
      showCarLine: 1,
      mapData: []
    }
  },
  mounted() {
    this.init()
  },
  beforeRouteLeave(to, from, next) {
    if (to.name === "单车跟踪") {
      from.meta.keepAlive = true
    } else {
      from.meta.keepAlive = false
    }
    next()
  },
  beforeDestroy() {
    socket.close()
    socket.websock = null
    socket.is_reonnect = null
    socket.hearbeat_timer = null
    socket.socket_open = null
    socket.ws_url = null
  },
  methods: {
    init() {
      socket.ws_url = "/provision/websocket/screen/" + Date.now()
      socket.init()
      socket.websock.addEventListener("message", (e) => {
        // if (e.data) {
        //   eventBus.$emit("WS_DATA_UPDATE", JSON.parse(e.data))
        // }
      })
      socket.send({})
    }
  }
}
</script>

<style scoped lang="less">
.over-not-line {
  height: 100%;
  width: 100%;
  overflow: hidden;

  .mapwhit {
    position: relative;
    user-select: none;
    user-drag: none;
    width: 100%;
    height: 1080px;
    overflow: hidden;
    // background-image: url("../../../assets/img/bigScreen/bigDataBorder.png");
    background: linear-gradient(90deg, #051328 20%, rgba(0, 0, 0, 0) 23%), linear-gradient(180deg, #051328 6%, rgba(0, 0, 0, 0) 11%), linear-gradient(270deg, #051328 21%, rgba(0, 0, 0, 0) 23%), linear-gradient(360deg, #051328 16%, rgba(0, 0, 0, 0) 23%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    // overflow: hidden;

    ::v-deep img {
      -webkit-user-drag: none;
    }
  }
}
</style>
